<template>
   <!-- 这是 频道编辑 弹出层内容 的组件 -->
  <div class="channel-edit">

    <!-- 我的频道单元格 -->
    <!-- 上部分 -->
     <van-cell :border="false">
       <i slot="title" class="title-text">我的频道</i>
       <van-button
       class="edit-btn"
        type="danger"
        plain
        round
        size="mini"
        @click="isEdit = !isEdit"
       >
       <!-- 点击"编辑" 对isEdit的布尔值进行取反  间接操作 v-show 绑定的微信图标是否显示 -->
       {{isEdit ? "完成" : "编辑"}}
      </van-button>
     </van-cell>
     <!--  下部分-->
     <van-grid :gutter="10" class="my-grid">
       <!-- mychannels数据是父组件 index.vue 传值过来的 里面是发起请求响应回来的频道列表数据 -->
     <van-grid-item
       v-for="(items, index) in mychannels"
       :key="index"
       class="grid-item"
       @click="onMyChannelClick(items,index)"
     >
     <!-- 数组方法includes 返回一个布尔值 用法:[1, 2, 3].includes(2);// true   [1, 2, 3].includes(4);// false-->
     <!-- flexchannels 已经在data中定义好了  flexchannels:[0] 这步操作就是让"我的频道"中永远保留"推荐"-->
     <van-icon v-show="isEdit && !flexchannels.includes(items.id)" slot="icon" name="wechat"></van-icon>
      <i slot="text"
      class="text"
      :class="index === myactive ? 'active' : ''"
      >
      <!-- 频道列表选中哪个  弹出层中的相同的标题就是对应显示高亮  通过三元运算符判断是否添加active类名来实现是否高亮 -->
      {{items.name}}
      </i>
     </van-grid-item>
     </van-grid>

    <!-- 频道推荐单元格 -->
    <!-- 上部分 -->
     <van-cell :border="false">
       <i slot="title" class="title-text">频道推荐</i>
     </van-cell>
     <!--  下部分-->
     <van-grid :gutter="10">
     <van-grid-item
      v-for="item in recommendChannels"
      :key="item.id" :text="item.name"
      class="grid-item"
      @click="onAddchannels(item)"
     />
     </van-grid>

  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteChannel } from '@/api/channel.js' // 获取 推荐频道列表 数据的接口封装出来的函数
import store from '@/store/index.js'
import { setItem } from '@/utils/localStorage.js'
export default {
  name: 'ChannelEdit',
  props: { // type: Array 接收的数据必须是数组形式  这个 {} 代表 props的配置对象 所以最终的props是一个数组形式 而不是一个对象形式
    mychannels: { // mychannels数据是父组件 index.vue 传值过来的 "我的频道列表"
      required: true,
      type: Array
    },
    myactive: { // myactive 数据是父组件 index.vue 传值过来的 代表了激活状态下的索引
      required: true,
      type: Number
    }
  },
  data () {
    return {
      allChannels: [], // 得到 所有频道列表 的数据
      isEdit: false, // 控制编辑状态  给微信图标添加 v-show属性 为turn则显示 false隐藏 通过isEdit的值动态控制
      flexchannels: [0] // 不需要编辑、删除的频道 作用在了<van-icon></van-icon>标签中 即在 我的频道 中永远保留"推荐"
    }
  },
  created () {
    this.loadAllChannels()
  },
  methods: {
    async loadAllChannels () {
      try {
        const { data } = await getAllChannels() // 获取 所有频道列表 请求接口的函数
        this.allChannels = data.data.channels
        // console.log(data.data.channels)
      } catch (err) {
        console.log('错误了我干')
      }
    },

    // 给 推荐频道 列表的每个元素添加点击事件 所绑定的方法
    // 因为下面的addUserChannel是异步操作 所有用到了async/await
    async onAddchannels (channel) { // channel形参 接收的是每个 推荐频道 元素的具体数据
      // console.log(channel)
      this.mychannels.push(channel)
      // 将“推荐频道”中被点击的那一项，push到“我的频道”中 但不需要我手动执行 移除“推荐频道”中的对应项，因为这一操作计算属性自动替我们做了

      // 数据持久化处理
      if (store.state.user) {
      // 已登录，把数据请求接口放到服务器
        try {
          await addUserChannel({ // 添加用户频道 接口  接口文档固定接收两个参数
            id: channel.id,
            // 为什么用channel.id 而不是 this.mychannels.id 因为在文档接口中有要求:本接口对收到的用户频道 新增的保存!说明"添加用户频道"接口需要的频道id是从"推荐频道"中新加过来的那个频道的id
            seq: this.mychannels.length
          })
        } catch (err) {
          console.log('错误,保存用户频道出现了错误')
        }
      } else {
      // 用户未登录情况下:则存到本地存储
        setItem('TOUTIAO_CHANNELS', this.mychannels)
      }
    },

    async onMyChannelClick (items, index) { // 点击 我的频道 中的单元格选项  完成 是跳转页面还是删除频道 的功能  根据isEdit的布尔值来进行判断
      if (this.isEdit) { // this.isEdit为true 说明微信小图标是显示状态 则进入删除功能
        if (this.flexchannels.includes(items.id)) { // 编辑状态下  点击"推荐" 也不会执行删除操作
          return
        }
        // 编辑状态 执行删除频道操作
        if (index < this.myactive) { // 要删除项在 高亮项的前面
          this.$emit('update-active', this.myactive - 1)
        }
        this.mychannels.splice(index, 1)
        // splice()方法始终会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，那么将会返回一个空数组。
        // splice与slice方法不一样 splice会修改原数组的项
        // 如果不接收返回值 那就是修改原数组   第一个参数 要删除的起点位置(包括起点位置)  第二个参数 要删除的项数

        // 做持久化操作
        // 删除频道也分 已登录和未登录 情况下的删除"我的频道"操作
        if (store.state.user) { // 已登录状态下的删除我的频道操作
          try {
            await deleteChannel(items.id)
          } catch (err) {
            console.log('删除我的频道失败')
          }
        } else { // 未登录状态下的删除我的频道操作
          setItem('TOUTIAO_CHANNELS', this.mychannels)
        }
      } else { // 进入 页面跳转 功能
        this.$emit('update-active', index) // 子组件向父组件通信
        //  this.$emit('自定义事件', 参数)
      }
    }
  },
  // 因为推荐频道是通过一个计算属性获取的，计算属性中使用了 mychannels（我的频道）数据
  // 计算属性会观测内部依赖数据的变化
  // 如果依赖的数据发生改变，则计算属性会重新执行
  // 所以只要我的频道中的数据发生变化，那么计算属性就会重新运算获取最新的数据
  computed: {
    recommendChannels () { // 得到 “推荐频道”数据  这是个函数 最后的结果必须return一下 函数得到的是一个数组
      // 第一种 得到 “推荐频道”数据的方法
      const tuijianChannel = []
      this.allChannels.forEach(allItem => {
        // find方法：返回第一个满足判断条件的数组元素
        const results = this.mychannels.find(myItem => { // 返回的results 是两个数组中撞衫的那个数组元素
          return allItem.id === myItem.id
          // 当遍历“所有频道”中某一数组元素的id 与 我的频道中某一数组元素id相同  则说明这两个数组中有数组元素撞衫了
        })
        if (!results) { // results是两个数组相同的那个元素 取反 则代表 将“所有频道”中 不与“我的频道”相同的元素剔除出来 放到tuijianChannel数组中
          tuijianChannel.push(allItem) // 进来的就是“所有频道”中所需要的“推荐频道”那部分了
        }
      })
      // console.log(tuijianChannel)
      return tuijianChannel

      // 第二种 得到 “推荐频道”数据的方法
      // return this.allChannels.filter(allitem => {
      //   return !this.mychannels.find(myitem => {
      //     return allitem.id === myitem.id
      //   })
      // })
    }
  }
}
</script>

<style scoped lang='less'>
.channel-edit {
  padding: 85px 0;

  .title-text {
    font-size: 32px;
    color: #333;
  }

  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }

  /deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      white-space: nowrap; // 不让文字折行显示
      background-color: #f4f5f6;

      .van-grid-item__text, .text {
        font-size: 22px;
        color: #222;
        margin-top: 4px !important;
      }
      .active {
        color: red;
      }
      .van-grid-item__icon-wrapper {
       position: unset;
      }
    }
  }

  /deep/ .my-grid {
    .grid-item {
      .van-icon-wechat {
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 30px;
        color: #cacaca;
        z-index: 2;
      }
    }
  }

}
</style>
